<template>
  <el-dialog :title="'新增关注'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form  :model="dataForm"  ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="30px">
       <el-form-item  label="设备检索："  label-width="100px">  
        <el-input v-model="dataForm.deviceInformation" placeholder="请输入内容"  clearable class="input-with-select" >
          <el-select v-model="select" slot="prepend" placeholder="查询索引">
      <el-option label="设备名称" value="deviceName"></el-option>
      <el-option label="设备编号" value="deviceId"></el-option>

    </el-select>
    <el-button slot="append" icon="el-icon-search"  class="green-button" @click="search()"></el-button>
       </el-input>
      </el-form-item> 
      <el-form-item  >
        <el-table height="500"  :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%; "  >
      <el-table-column type="index"  header-align="center" align="center" label="序号"></el-table-column>
      <el-table-column prop="workshopName" header-align="center" align="center" label="车间名称"></el-table-column> 
      <el-table-column prop="name" header-align="center" align="center" label="设备类型"   ></el-table-column>
      <el-table-column prop="deviceId" header-align="center" align="center"  label="设备编号"></el-table-column>
      <el-table-column prop="deviceName" header-align="center" align="center" label="设备名称"></el-table-column>    
       <el-table-column label="关注勾选">  
      <el-table-column type="selection" header-align="center" align="center" width="50" ></el-table-column>
      </el-table-column>  
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
      :total="totalCount" layout="total,sizes,prev,pager,next,jumper"></el-pagination>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible=false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<style >
  .el-select .el-input {
    width: 130px;
   
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
    color: rgb(14, 14, 14);
  }
  .input-with-select .el-input-group__append:hover {
    background-color: #9cc8e8; 
    border-color: #6a8bbc; 
    color: rgb(250, 250, 250);
  }
</style>

<script>

  export default{
    
    data(){
      return{
        dataListSelections:[],
        dataList:[],
        follow:[],
        visible:false,
         select:'',
        dataListLoading:false,
        dataForm:{
          deviceId:'',
          deviceInformation:'',
          selectedFilter:'',
        },

      }
    },
    methods:{
      sizeChangeHandle(val){
        this.pageSize=val
        this.pageIndex=1
        this.getDataList()
      },
      currentChangeHandle(val){
        this.pageIndex=val
        this.getDataList()
      },
      selectionChangeHandle(val){
        this.dataListSelections=val
        console.log( this.dataListSelections);
        
      },
      search() { 
        this.pageIndex=1
        this.getDataList()
      },
      getDataList(){
        this.dataListLoading=true
        this.$http({
          url:this.$http.adornUrl('/dss/deviceInformation/list'),
          method:'get',
          params:this.$http.adornParams({
            'page':this.pageIndex,
              'limit':this.pageSize,
            'deviceId':this.dataForm.deviceId,
            'deviceInformation':this.dataForm.deviceInformation,
            'selectedFilter':this.dataForm.selectedFilter,
            'select':this.select,
            'lightStatus':this.dataForm.lightStatus

          })
        }).then(({data})=>{
          if (data && data.code===0){
            console.log(data)
            this.dataList=data.page.list
            this.totalCount=data.page.totalCount
            this.types = [...new Set(this.dataList.map(item => item.name))].map(name => {
              return { text: name, value: name }})
              let filteredDataList = this.dataList.filter(dataItem => 
                !this.followList.some(followItem => followItem.deviceId === dataItem.deviceId));
                  this.totalCount -= this.dataList.length - filteredDataList.length;
                 this.dataList=filteredDataList
                }else{
            this.dataList=[]
            this.totalCount=0
          }
          this.dataListLoading=false
        })
      },
      init(followList){
        console.log(followList);
        
        this.followList=followList
        this.getDataList()
        this.visible=true
      },
      dataFormSubmit(){
          if (this.dataListSelections){
            var deviceIds=this.dataListSelections.map(item=>{
          return item.deviceId
        })
            this.$http({
              url:this.$http.adornUrl(`/dss/follow/save`),
              method:'post',
              data:this.$http.adornData(deviceIds,false)
            }).then(({data})=>{
              if (data&&data.code===0) {
                this.$message({
                  message:'操作成功',
                  type:'success',
                  duration:1500,
                  onClose:() =>{
                    this.visible=false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        
      }
    }
  }
</script>
